<template>
  <div class="gpmSearch-root">
    <lark-card body-height="max-content" body-width="19vw" :radius="false" :show-close-btn="false" :show-title="false">
      <div class="input-search">
        <el-input size="large" v-model="searchForm.value" @keyup.enter.native="searchBtn" placeholder="请输入种子名称搜索">
          <div slot="append">
            <i @click="searchBtn" class="el-icon-search search-btn "></i>
          </div>
        </el-input>
      </div>
    </lark-card>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import { Message } from 'element-ui'

  export default {
    name: 'gpmSearch',
    components: {},

    setup(props, content) {
      let data = reactive({
        searchForm: {
          value: null
        }
      })
      const searchBtn = () => {
        if (data.searchForm.value == null || data.searchForm.value == '') {
          Message.warning('请输入内容再进行搜索')
          return
        }
        content.emit('search', data.searchForm)
      }
      return { ...toRefs(data), searchBtn }
    }
  }
</script>

<style scoped lang="scss">
  .gpmSearch-root {
    .input-search {
    }

  }
</style>

<style lang="scss">
  .gpmSearch-root {

    .input-search {

      .el-input-group__append {
        &:hover {
          cursor: pointer;
        }

        border-radius: 0;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 24px;
        border: 0;
      }
    }
  }

</style>
